<template>
  <view>
    <customtop top_title="我的收藏"></customtop>
    <scroll-view scroll-x="true" class="top_nav">
    	<view class="box">
    		<view class="item" :class="ident == '合作信息' ? 'on' : ''" @click="switchIdent('合作信息')">合作信息</view>
        <view class="item" :class="ident == '公司' ? 'on' : ''" @click="switchIdent('公司')">公司</view>
    	</view>
    </scroll-view>
    <view class="top_nav_blank"></view>

    <!-- post start -->
    <view class="post_list3" v-if="ident == '合作信息'">
      <view class="container" v-if="!data_list_loading">
        <view v-if="data_list.length > 0">
          <view class="items">
            <view class="item" v-for="(item, index) in data_list" :key="index">
              <view class="top" @click="jumpPage('/pages/post/show?id=' + item.id)">
                <view class="title">{{item.title}}</view>
              </view>
              <view class="types">
                <view class="type_item">
                  <span>编号：</span><span>{{item.id}}</span>
                </view>
                <view class="type_item">
                  <span>类目：</span><span>{{item.category_name}}</span>
                </view>
              </view>
              <view class="item_foot">
                <view class="vm1">收藏时间：{{item.created_at}}</view>
                <view class="actions">
                  <span class="a" @click="deleteCollect_post(item.id)">移除</span>
                </view>
              </view>
            </view>
          </view>
          <view class="uloadmore" @click="getMore"><u-loadmore :status="loadmore_status" /></view>
        </view>
        <u-empty
          v-if="data_list.length == 0"
          mode="data"
          icon="http://cdn.uviewui.com/uview/empty/data.png"
          text="暂无收藏~"
        >
        </u-empty>
      </view>
    </view>
    <!-- post end -->

    <!-- company start -->
    <view class="company_list3" v-if="ident == '公司'">
      <view class="container" v-if="!data_list_loading">
        <view v-if="data_list.length > 0">
          <view class="items">
            <view class="item" v-for="(item, index) in data_list" :key="index">
              <view class="itembd" @click="jumpPage('/pages/company/show?id=' + item.id)">
                <image class="cover" :src="item.logo" mode="aspectFill" />
                <view class="maininfo">
                  <view class="name">{{item.shortname}}</view>
                  <view class="dec">{{item.name}}</view>
                  <view class="dec">
                    <span class="dec_item">{{item.user_count}}个员工</span>
                    <span class="dec_item">{{item.post_count}}条发布信息</span>
                  </view>
                </view>
              </view>
              <view class="item_foot">
                <view class="vm1">收藏时间：{{item.created_at}}</view>
                <view class="actions">
                  <span class="a" @click="deleteCollect_company(item.id)">移除</span>
                </view>
              </view>
            </view>
          </view>
          <view class="uloadmore" @click="getMore"><u-loadmore :status="loadmore_status" /></view>
        </view>
        <u-empty
          v-if="data_list.length == 0"
          mode="data"
          icon="http://cdn.uviewui.com/uview/empty/data.png"
          text="暂无收藏~"
        >
        </u-empty>
      </view>
    </view>
    <!-- company end -->
  </view>
</template>

<script>
import { request } from "@/utils/http.js"
import customtop from "@/components/customtop.vue"
export default {
  components: { customtop },

  data() {
    return {
      ident: '合作信息',
      data_list: [],
      data_list_loading: true,
      loadmore_status: 'loadmore',
      loadmore_finished: false,
      params: {
        page_size: 15,
        page: 1,
      },
    }
  },

  onLoad: function (options) {
    uni.showLoading();
    this.getPostsPaginate();
  },

  onReachBottom() {
    this.getMore();
  },

  methods: {
    switchIdent: function(ident) {
      uni.showLoading();
      this.ident = ident;
      this.data_list_loading = true;
      this.loadmore_status = 'loadmore';
      this.loadmore_finished = false;
      this.params.page = 1;
      this.data_list = [];
      if (this.ident == '合作信息') {
        this.getPostsPaginate();
      }
      if (this.ident == '公司') {
        this.getCompanysPaginate();
      }
    },

    getPostsPaginate: function() {
      let params = this.params;
      request.post('/post/getPostsPaginate_collect', params).then(res => {
        uni.stopPullDownRefresh();
        uni.hideLoading();
        this.data_list_loading = false;

        // 返回数据为空
        if (res.data.total == 0) {
          this.data_list = [];
          return false;
        }

        // 组装数据
        if (res.data.current_page == 1) {
          this.data_list = res.data.data;
        } else {
          this.data_list = this.data_list.concat(res.data.data);
        }

        // 最后一页
        if (this.params.page == res.data.last_page) {
          this.loadmore_finished = true;
          this.loadmore_status = 'nomore';
          return false;
        }

        this.params.page = parseInt(res.data.current_page) + parseInt(1);
        this.loadmore_status = 'loadmore';
        this.loadmore_finished = false;
      })
    },

    getCompanysPaginate: function() {
      let params = this.params;
      params.company_id = this.id;
      request.post('/company/getCompanysPaginate_collect', params).then(res => {
        uni.stopPullDownRefresh();
        uni.hideLoading();
        this.data_list_loading = false;

        // 返回数据为空
        if (res.data.total == 0) {
          this.data_list = [];
          return false;
        }

        // 组装数据
        if (res.data.current_page == 1) {
          this.data_list = res.data.data;
        } else {
          this.data_list = this.data_list.concat(res.data.data);
        }

        // 最后一页
        if (this.params.page == res.data.last_page) {
          this.loadmore_finished = true;
          this.loadmore_status = 'nomore';
          return false;
        }

        this.params.page = parseInt(res.data.current_page) + parseInt(1);
        this.loadmore_status = 'loadmore';
        this.loadmore_finished = false;
      })
    },

    getMore: function() {
      if (!this.loadmore_finished) {
        this.loadmore_status = 'loading';
        if (this.ident == '合作信息') {
          this.getPostsPaginate();
        }
        if (this.ident == '公司') {
          this.getCompanysPaginate();
        }
      }
    },

    deleteCollect_post: function(id) {
      let that = this;
      uni.showLoading();
      request.post('/post/deleteCollect', { post_id: id }).then(res => {
        uni.hideLoading();
        if (res.code == 200) {
          uni.showToast({
            title: '已移除收藏',
            icon: 'none'
          })
          that.deleteAfter(id);
        } else if (res.code == 400) {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
          return false;
        }
      })
    },

    deleteCollect_company: function(id) {
      let that = this;
      uni.showLoading();
      request.post('/company/deleteCollect', { company_id: id }).then(res => {
        uni.hideLoading();
        if (res.code == 200) {
          uni.showToast({
            title: '已移除收藏',
            icon: 'none'
          })
          that.deleteAfter(id);
        } else if (res.code == 400) {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
          return false;
        }
      })
    },

    // 删除后
    deleteAfter: function(id) {
      let data_list = this.data_list;
      if (!data_list.length > 0) return false;
      for (var i = 0; i < data_list.length; i++) {
        if (data_list[i].id == id) {
          data_list.splice(i, 1);
        }
      }
      this.data_list = data_list;
    },

    jumpPage: function(url) {
      uni.navigateTo({ url: url })
    },

    switchTab: function(url) {
      uni.switchTab({ url: url });
    },
  }
}
</script>

<style>
page {
  padding-bottom: 30rpx;
}
.top_nav {
	position: fixed;
	z-index: 99;
  left: 0;
  font-size: 14px;
  color: #666;
}
.top_nav .box {
	background-color: #fff;
	height: 88rpx;
	line-height: 88rpx;
	width: 100%;
	white-space: nowrap;
	display: flex;
}
.top_nav_blank {
	height: 88rpx;
}
.top_nav .item {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	min-width:50%;
	max-width:50%;
	text-align:center;
	background-color: #fff;
}
.top_nav .item.on {
	color: #00B38A;
}

.post_list3 .item {
  padding-bottom: 30rpx;
  margin-top: 30rpx;
  background-color: #fff;
  padding: 30rpx;
}
.post_list3 .items .types {
	font-size: 24rpx;
	color: #666;
	margin-left: -20rpx;
  overflow: hidden;
  margin-top: 10px;
}
.post_list3 .items .type_item {
  float: left;
  margin-left: 20rpx;
}
.post_list3 .items .item_foot {
  font-size: 24rpx;
  margin-top: 30rpx;
  padding-top: 30rpx;
  overflow: hidden;
  border-top: 1px solid #f5f5f5;
}
.post_list3 .items .item_foot .vm1 {
	float: left;
}
.post_list3 .items .item_foot .actions {
	float: right;
}
.post_list3 .items .item_foot .actions .a {
	margin-left: 5px;
  color: #999;
}
.post_list3 .items .item_foot .actions .split_line {
	margin-left: 5px;
	color: #999;
}

.company_list3 .item {
  margin-top: 30rpx;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 5px;
}
.company_list3 .itembd {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.company_list3 .item .cover {
  width: 160rpx;
  height: 160rpx;
  margin-right: 20rpx;
}
.company_list3 .item .dec {
  font-size: 12px;
  color: #999;
  margin-top: 3px;
}
.company_list3 .item .dec_item {
  margin-right: 6px;
}
.company_list3 .item_foot {
  font-size: 24rpx;
  margin-top: 30rpx;
  padding-top: 30rpx;
  overflow: hidden;
  border-top: 1px solid #f5f5f5;
}
.company_list3 .item_foot .vm1 {
	float: left;
}
.company_list3 .item_foot .actions {
	float: right;
}
.company_list3 .item_foot .actions .a {
	margin-left: 5px;
  color: #999;
}
.company_list3 .item_foot .actions .split_line {
	margin-left: 5px;
	color: #999;
}

.uloadmore {
  margin: 30rpx 0;
}
</style>
